<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="shortcut icon" href="./../favicon.png">
    <title>WFee</title>
    <link rel="stylesheet" href="./../assets/css/toastr.min.css" type="text/css" charset="utf-8"/>
    <style>
        html, body {
            height: 100%;
        }
        body {
            margin: 0;
            background-image: url(./../assets/img/bg.png);
            background-size: 100% 100%;
        }
        .logo {
            position: relative;
            margin: 0 auto;
            max-width: 600px;
            padding-top: 20px;
            padding-bottom: 20px;
        }
        .logo img {
            display: block;
            margin: 10px auto;
            width: 70px;
        }
        .content {
            text-align: left;
            padding: 20px;
            font-size: 12px;
            line-height: 21px;
            color: #000000;
        }
        .main {
            max-width: 600px;
            background-color: #ffffff;
            width: 94%;
            margin: 0 auto;
            text-align: center;
            padding: 10px 0 10px 0;
            border-radius: 12px;
        }
        .main h1 {
            font-size: 20px;
        }
        .form {
            text-align: left;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group .input, .form-group label {

        }
        .form-group label {
            float: left;
            width: 25%;
            display: inline-block;
            text-align: right;
            padding: 11px 0 5px 0;
        }
        .form-group .input {
            padding: 5px;
            width: 65%;
            margin-left: 25%;
            border: 1px solid #D2D2D2;
            border-radius: 5px;

        }
        .form-group .input input {
            outline: none;
            border: none;
            font-size: 14px;
            height: 31px;

        }
        .form-group .input .email{
            width: 90%;
        }
        .form-group .input .validate{
            width: 94px;
        }
        .form-group .input .get-validate {
            float: right;
        }
        .get-validate {
            width: 100px;
            background-color: #2A70EB;
            outline: none;
            border: none;
            color: #ffffff;
            padding: 8px 10px 8px 10px;
            border-radius: 4px;
        }
        .login-submit {
            outline: none;
            width: 80%;
            max-width: 300px;
            margin-top: 20px;
            /*margin-bottom: 20px;*/
            color: #ffffff;
            background-color: #2A70EB;
            border: 0;
            padding: 10px;
            border-radius: 30px;
            font-size: 16px;
            font-weight: bold;
        }
        .get-validate.disabled {
            background-color: #DADADA;
        }
        select.ln {
            position: absolute;
            /* -moz-appearance: none; */
            /* -webkit-appearance: none; */
            width: 80px;
            height: 31px;
            outline: none;
            background: none;
            font-size: 15px;
            padding: 0 0 0 8px;
            border: 1px solid #326dfb;
            border-radius: 0;
            color: #326dfb;
            top: 10px;
            right: 10px;
            border: none;
            background-color: #ffffff;
            /* border-radius: 7px; */
            /* box-shadow: 1px 1px 2px #666666; */
        }
        select.ln option {
        }

        @media screen and (max-width: 650px) {
            select.ln {
                appearance: none;
                 -moz-appearance: none;
                 -webkit-appearance: none;
            }
        }

    </style>
</head>
<body class="share-login">
<div style="padding-bottom: 20px;">

    <input th:value="${uuid}" style="display: none" class="uuid">
    <input th:value="${invitationcode}" style="display: none" class="invitationcode">


    <div class="logo">
        <select class="ln"><option value="en"> Engilsh </option><option value="zh">中文</option></select>
        <img src="./../assets/img/001.png">
        <img src="./../assets/img/002.png">
    </div>
    <div class="main">
        <h1 class="label01"></h1>
        <p class="content">
            <span style="font-size: 14px; color: #000000; font-weight: bold;" class="label52"></span>
            <br>
            <span  class="label53"></span>
        </p>
        <div class="form">
            <div class="form-group">
                <label class="label05"></label>
                <div class="input">
                    <input class="email label06" type="email" placeholder="">
                </div>
            </div>
            <div class="form-group">
                <label class="label07"></label>
                <div class="input">
                    <input class="validate" type="text" placeholder="">
                    <button class="get-validate label08"></button>
                </div>
            </div>
        </div>
        <button class="login-submit label09"></button>
        <p style="color: red; font-size: 12px; width: 80%;margin-left: 10%;margin-bottom: 20px;text-align: left;" class="label49"></p>
    </div>
</div>
</body>
<script type="text/javascript" src="./../assets/js/jquery.js"></script>
<script type="text/javascript" src="./../assets/js/toastr.min.js"></script>
<script type="text/javascript" src="./../assets/js/label.js"></script>
<script>

    var host = window.location.host;
    var lang;
    var setLabel = function (value) {
        // console.log(value)
        $('.label01').html(value.label01);
        $('.label52').html(value.label52);
        $('.label53').html(value.label53);
        $('.label04').html(value.label04);
        $('.label05').html(value.label05);
        $('.label06').attr('placeholder', value.label06);
        $('.label07').html(value.label07);
        $('.label08').html(value.label08);
        $('.label09').html(value.label09);
        $('.label49').html(value.label49);
    };

    // 初始化获取浏览器语言版本
    lang = getLang();
    // 选择框更改walue
    $('.ln').val(lang.type);
    // 填充网页语言
    setLabel(lang);

    $(document).ready(function () {
        toastr.options = {
            //弹出窗的位置
            // "positionClass": "toast-top-full-width",
        };

        // 监听语言选择框
        $('.ln').change(function () {
            lang = getLang($(this).val());
            setLabel(lang);
        });

        // 获取验证码
        $('.get-validate').on('click', function() {

            var uuid = $('.uuid').val();
            var email = $('.email').val();
            if (!email) {
                toastr.warning(lang.label26);
                return false;
            } else if (email.match(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) == null) {
                toastr.warning(lang.label27);
                return false;
            }
            // 初始化倒计时
            var i = 60;
            // 按钮不可点击
            $(this).attr('disabled',"true").addClass('disabled').html(i + "(s)");
            var interval = setInterval(function () {
                i -= 1;
                $('.get-validate').html(i + "(s)");
                if (i == 0) {
                    $('.get-validate').attr('disabled',false).removeClass('disabled').html(lang.label28);
                    clearInterval(interval);
                }
            },1000);
            var parameter = {
                "email": email,  // 邮箱信息
                "uuid":  uuid// UUID 注册页面带过来的 请求凭证
            };
            $.ajax({
                url: 'http://' + host + '/user/getvcode',
                processData: true,
                type: 'POST',
                contentType: 'application/json;charset=utf-8',
                timeout: 6000,
                data: JSON.stringify(parameter),
                beforeSend: function() {},
                success: function (data, status) {
                    // console.log(data.msg)
                    if (data.code == 200) {
                        // 登陆成功 存储token 跳转我的页面
                        toastr.success(lang.label29);
                    } else {
                        toastr.error(data.msg)
                    }
                },
                error: function (XHR, status, error) {
                }
            })
        });

        // 登录
        $('.login-submit').on('click', function() {

            var uuid = $('.uuid').val();
            var email = $('.email').val();
            var validate = $('.validate').val();
            var invitationcode = $('.invitationcode').val();

            if (!email) {
                toastr.warning(lang.label26);
                return false;
            } else if (email.match(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) == null) {
                toastr.warning(lang.label27);
                return false;
            } else if (!validate) {
                toastr.warning(lang.label30);
                return false;
            }

            var parameter = {
                "email": email,
                "uuid":  uuid,
                "code": validate,
                "invitationcode":  invitationcode
            };

            $.ajax({
                url: 'http://' + host + '/user/loginweb',
                processData: true,
                type: 'POST',
                contentType: 'application/json;charset=utf-8',
                timeout: 6000,
                data: JSON.stringify(parameter),
                beforeSend: function() {},
                success: function (data, status) {
                    if (data.code == 200) {
                        console.log(data);
                        // 登陆成功 存储token 跳转我的页面
                        setCookie('account', data.data.account, 2);
                        setCookie('refreshToken', data.data.refreshToken, 2);
                        setCookie('token', data.data.token, 2);
                        setCookie('vpnId', data.data.vpnId, 2);
                        location.href = './../my'
                    } else {
                        toastr.error(data.msg)
                    }
                },
                error: function (XHR, status, error) {
                }
            })
        });
    });
    var setCookie = function (name, value, expHours) {
        var exp = new Date()
        exp.setTime(exp.getTime() + expHours * 60 * 60 * 1000);
        document.cookie = name + '=' + value + ';expires=' + exp.toGMTString() +　';path=/'
    };



</script>

</html>
